<script setup lang="ts">
import { ref } from 'vue'

import { RouterView } from 'vue-router'
import router from './config/Router'

import { NConfigProvider, NDialogProvider, NMessageProvider, NModalProvider } from 'naive-ui'

import { NFloatButton } from 'naive-ui'

import { darkTheme, lightTheme } from 'naive-ui'
import { BuiltInGlobalTheme } from 'naive-ui/es/themes/interface'

import MessageView from './components/MessageView.vue'

const theme = ref<BuiltInGlobalTheme>(darkTheme)

const themeMap = new Map<string, BuiltInGlobalTheme>()
themeMap[darkTheme.name] = darkTheme
themeMap[lightTheme.name] = lightTheme

const themeList = new Array<string>(darkTheme.name, lightTheme.name)

const changeTheme = () => {
    let index = themeList.indexOf(theme.value.name)
    index++
    index = index >= themeList.length ? 0 : index
    theme.value = themeMap[themeList[index]]
}

router.push('/list')
</script>

<template>
    <n-config-provider :theme="theme">
        <n-message-provider>
            <n-dialog-provider>
                <NModalProvider>
                    <MessageView></MessageView>
                    <n-float-button
                        class="b-size"
                        width="60"
                        :right="20"
                        :top="20"
                        shape="square"
                        @click="changeTheme"
                        >{{ theme.name }}
                    </n-float-button>
                    <RouterView></RouterView>
                </NModalProvider>
            </n-dialog-provider>
        </n-message-provider>
    </n-config-provider>
</template>

<style>
.b-size {
    font-size: small;
}
</style>
